import React, { useState } from 'react';
import { View, StyleSheet, Text, TextInput, FlatList, Image, TouchableOpacity } from 'react-native';
import NavBar from '@/components/NavBar';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import DefaultAvatar from '@/assets/images/default_avatar.png';

// 模拟好友数据
const FRIENDS_DATA = [
  {
    id: '1',
    name: '左左',
    avatar: 'https://ts2.cn.mm.bing.net/th?id=ORMS.d06126240c548af3658f48d1981de3d9&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0',
    location: '中国',
    constellation: '水瓶座',
  },
  {
    id: '2',
    name: '李四',
    avatar: 'https://placekitten.com/101/101',
    location: '日本',
    constellation: '水瓶座',
  },
  // 可以添加更多好友数据
];

type RootStackParamList = {
  chatScreen: { userId: string };
};

type NavigationProp = StackNavigationProp<RootStackParamList, 'chatScreen'>;

export default function FriendsScreen() {
  const navigation = useNavigation<NavigationProp>();
  const [searchText, setSearchText] = useState('');
  const [errorImages, setErrorImages] = useState<Record<string, boolean>>({});

   // 根据搜索文本筛选好友
   const filteredFriends = FRIENDS_DATA.filter(friend =>
    friend.name.toLowerCase().includes(searchText.toLowerCase())
  );
  const renderFriendItem = ({ item }) => (
    <TouchableOpacity
      style={styles.friendItem}
      onPress={() => navigation.navigate('chatScreen', { userId: item.id })}
    >
      <Image
        source={errorImages[item.id] ? DefaultAvatar : { uri: item.avatar }}
        style={styles.avatar}
        onError={() => setErrorImages(prev => ({ ...prev, [item.id]: true }))}
      />
      <View style={styles.friendInfo}>
        <Text style={styles.friendName}>{item.name}</Text>
        <Text style={styles.locationInfo}>
          {item.location} | {item.constellation}
        </Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <NavBar title="我的好友" />

      <View style={styles.searchContainer}>
        <Ionicons name="search-outline" size={20} color="#999" style={styles.searchIcon} />
        <TextInput
          style={styles.searchInput}
          placeholder="搜索"
          placeholderTextColor="#999"
          value={searchText}
          onChangeText={setSearchText}
        />
      </View>

      <FlatList
        data={filteredFriends}
        renderItem={renderFriendItem}
        keyExtractor={item => item.id}
        style={styles.friendList}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F6F6F6',
    marginHorizontal: 16,
    marginVertical: 12,
    paddingHorizontal: 12,
    height: 36,
    borderRadius: 10,
  },
  searchIcon: {
    marginRight: 8,

  },
  searchInput: {
    flex: 1,
    fontSize: 15,
    color: '#333',
    padding: 0,
  },
  friendList: {
    flex: 1,
  },
  friendItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#EEEEEE',
    backgroundColor: 'white',
  },
  avatar: {
    width: 45,
    height: 45,
    borderRadius: 22.5,
    marginRight: 12,
  },
  friendInfo: {
    flex: 1,
    justifyContent: 'center',
  },
  friendName: {
    fontSize: 16,
    color: '#333',
    marginBottom: 4,
  },
  locationInfo: {
    fontSize: 13,
    color: '#999',
  },
});
